<template>
    <div class="ccui-home-index">
        <div class="ccui-app-container">
            <!-- 高级搜索 -->
            <div class="ccui-advanced-search-wrapper ccui-clearfix">
                <el-search
                    :formProp="formData"
                    @search="search"
                    @change="change"
                    class="ccui-highsearch no-print"
                    @resetForm="resetForm"
                >
                    <tabsToggle :toggleBtn="toggleBtn" :totalAccount="page.totalNum" :isActive="isActive" @toggleClick="toggleClick"/>
                    <div class="ccui-extend-btn">
                        <el-button
                            type="primary"
                            @click="handleGoNew"
                            icon="icon-ccui-add-sup"
                        >新增
                        </el-button>
                    </div>
                    <template slot="search">
                        <el-input
                            v-model="formData.writeoffName"
                            clearable
                            searchLabel="冲销单名称"
                            placeholder="请输入冲销单名称模糊查询"
                            @blur="handleTrim('writeoffName')"
                        />
                        
                        <el-input
                            v-model="formData.writeoffCode"
                            clearable
                            searchLabel="冲销单编号"
                            placeholder="请输入冲销单编号模糊查询"
                            @blur="handleTrim('writeoffCode')"
                        />
    
                        <el-input
                            v-model="formData.contractCode"
                            clearable
                            searchLabel="合同编号"
                            placeholder="请输入合同编号模糊查询"
                            @blur="handleTrim('contractCode')"
                        />
                        
                        <el-input
                            v-model="formData.settlementCode"
                            clearable
                            searchLabel="结算单编号"
                            placeholder="请输入结算单编号模糊查询"
                            @blur="handleTrim('settlementCode')"
                        />
    
                        <el-input
                            v-model="formData.supplierName"
                            clearable
                            searchLabel="供应商"
                            placeholder="请输入供应商模糊查询"
                            @blur="handleTrim('supplierName')"
                        />
    
                        <el-input
                            v-model="formData.reportInOrgName"
                            clearable
                            searchLabel="填报单位"
                            placeholder="请输入填报单位模糊查询"
                            @blur="handleTrim('reportInOrgName')"
                        />
                    </template>
    
                    <el-input
                        v-model="formData.writeoffName"
                        clearable
                        searchLabel="冲销单名称"
                        placeholder="请输入冲销单名称模糊查询"
                        slot="searchItem1"
                        @blur="handleTrim('writeoffName')"
                    />
    
                    <el-input
                        v-model="formData.writeoffCode"
                        clearable
                        searchLabel="冲销单编号"
                        placeholder="请输入冲销单编号模糊查询"
                        slot="searchItem2"
                        @blur="handleTrim('writeoffCode')"
                    />
    
                    <el-input
                        v-model="formData.contractCode"
                        clearable
                        searchLabel="合同编号"
                        placeholder="请输入合同编号模糊查询"
                        slot="searchItem3"
                        @blur="handleTrim('contractCode')"
                    />
                    
                    <el-input
                        v-model="formData.settlementCode"
                        clearable
                        searchLabel="结算单编号"
                        placeholder="请输入结算单编号模糊查询"
                        slot="searchItem4"
                        @blur="handleTrim('settlementCode')"
                    />
    
                    <el-input
                        v-model="formData.supplierName"
                        clearable
                        searchLabel="供应商"
                        placeholder="请输入供应商模糊查询"
                        slot="searchItem5"
                        @blur="handleTrim('supplierName')"
                    />
    
                    <el-input
                        v-model="formData.reportInOrgName"
                        clearable
                        searchLabel="填报单位"
                        placeholder="请输入填报单位模糊查询"
                        slot="searchItem6"
                        @blur="handleTrim('reportInOrgName')"
                    />
                </el-search>
            </div>
            <!-- Table表格 -->
            <div class="ccui-multifunctional-table-wrapper">
                <Table :table-data="tableData" :table-thead-options="tableTheadOptions" :detail-url="detailUrl" :detail-title="detailTitle">
                    <el-table-column label="操作" width="80" fixed="right">
                        <template slot-scope="{ row }">
                            <el-button
                                v-if="['待提交', '已撤回', '审批退回'].includes(row.billStatus)"
                                size="mini"
                                type="text"
                                @click="handleGoEdit(row)"
                            >编辑
                            </el-button>
                            
                            <el-button
                                v-if="row.billStatus == '审批中'"
                                size="mini"
                                type="text"
                                @click="getRevoke(row, revokeSettlementWrite)"
                            >撤回
                            </el-button>
                            
                            <el-button
                                v-if="['待提交', '已撤回'].includes(row.billStatus)"
                                size="mini"
                                type="text"
                                @click="handleDelete(row, removeSettlementWrite)"
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
                </Table>
                <div class="ccui-table-footer" v-show="tableData.length > 0">
                    <Pagination :page="page" @handlePageChange="handlePageChange"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import tabsToggle from "@/basa/components/public_practice/tabsToggle";
import Table from "@/basa/components/public_practice/Table";
import Pagination from "@/basa/components/public_practice/Pagination";
import {listSettlementWritePage, revokeSettlementWrite, removeSettlementWrite} from "@/app/settlement-management/equipment/api";
import listMixin from "@/app/settlement-management/equipment/mixins/listMixin";

export default {
    name: "all",
    components: {tabsToggle, Table, Pagination},
    mixins: [listMixin],
    data() {
        return {
            toggleBtn: [
                {
                    label: "全部",
                    status: "0"
                },
                {
                    label: "待提交",
                    status: "1"
                },
                {
                    label: "审批中",
                    status: "2"
                },
                {
                    label: "审批退回",
                    status: "3"
                }
            ],
            tableTheadOptions: [
                {
                    type: "index",
                    label: "序号",
                    width: "50",
                    fixed: true
                },
                {
                    label: "冲销单编号",
                    prop: "writeoffCode",
                    width: "180",
                    fixed: true
                },
                {
                    label: "冲销单名称",
                    prop: "writeoffName",
                    width: "300"
                },
                {
                    label: "结算单编号",
                    prop: "settlementCode",
                    width: "150"
                },
                {
                    label: "填报单位",
                    prop: "reportInOrgName",
                    width: "200"
                },
                {
                    label: "合同编号",
                    prop: "contractCode",
                    width: "150"
                },
                {
                    label: "合同名称",
                    prop: "contractName",
                    width: "300"
                },
                {
                    label: "供应商",
                    prop: "supplierName",
                    width: "200"
                },
                {
                    label: "编制人",
                    prop: "reportUsername"
                },
                {
                    label: "编制日期",
                    prop: "reportTime",
                    width: "100"
                },
                {
                    label: "单据状态",
                    prop: "billStatus",
                    width: "70"
                }
            ],
            detailUrl: "/settlement-management/equipment-writeOff/detail",
            detailTitle: "冲销单编号"
        }
    },
    methods: {
        revokeSettlementWrite,
        removeSettlementWrite,
        // 分页 - 高级搜索 结束 每页显示条数要对上
        // 获取数据
        getList(reqObj) {
            let obj = {};
            let params = typeof reqObj === "object" ? reqObj : obj;
            obj.pageNo = this.page.pageNoCode;
            obj.pageSize = this.page.pageSizeCode;
            obj.labelType = this.listStatus === null? 0 : "";
            obj.isShowPageLoading = true;
            listSettlementWritePage(params).then(res => {
                let result = res.data.data;
                result.rows.map(item => {
                    item.billStatus = this.equipmentWriteOffStatus[item.billStatus];
                });
                this.tableData = result.rows;
                this.page.totalNum = result.recordsTotal;
                this.page.pageNoCode = result.pageNo; // 当前页
            });
        },
        handleGoNew() {
            this.$router.push("/settlement-management/equipment-writeOff/itemNew");
        },
        handleGoEdit(row) {
            this.$router.push({
                path:"/settlement-management/equipment-writeOff/itemNew",
                query:{id: row.id}
            });
        },
    },
    mounted() {
        this.getList();
    },
    activated() {
        this.getList();
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-table__fixed-header-wrapper {
    th {
        pointer-events: auto;
    }
}

/deep/ .el-table__fixed,
/deep/ .el-table__fixed-right {
    pointer-events: none;
    
    td {
        pointer-events: auto;
    }
    
}
</style>